$(function() {
    // 文本内容
    var $msgInput = $('.input');
    // 发布按钮
    var $releaseBtn = $('.releave-btn');

    $releaseBtn.click(function() {

        /* 创建 showBox里的各个对象:
         * showName : 留言人名称
         * showMsg : 留言内容
         * showTime : 留言时间
         * showClose : 关闭留言
         */
        var $showEvent = $('<div class="showEvent"></div>')
        var $showName = $('<div class="showName"></div>');
        var $showMsg = $('<div class="showMsg"></div>');
        var $showTime = $('<div class="showTime"></div>');
        var $showClose = $('<div class="showClose"></div>');
        var $showContent = $('<p class="showContent"></p>');

        // new 一个日期
        var date = new Date().toLocaleString();

        // 给不同对象设置内容
        $showName.text('Xxx');
        $showContent.text($msgInput.val());
        $showTime.text(date);
        $showClose.text('x');

        // 声明这些对象在 DOM 树中的位置
        $('.showBox').prepend($showEvent);
        $showEvent.append($showName);
        $showEvent.append($showMsg);
        $showEvent.append($showTime);
        $showEvent.append($showClose);
        $showMsg.append($showContent);

        // 删除留言
        $showClose.click(function() {
            $showEvent.remove()
        })

        $msgInput.val('')


    })
})